 <!DOCTYPE html>
 <html lang="en">
 <head>
 	<meta charset="UTF-8">
 	<title>Document</title>
 	<link rel="stylesheet" type="text/css" href="statics/bootstrap/css/bootstrap.min.css">
 	<link rel="stylesheet" type="text/css" href="statics/bootstrap/plugin/tagsinput/bootstrap-tagsinput.css">
 	<link rel="stylesheet" type="text/css" href="statics/bootstrap/plugin/tagsinput/bootstrap-tagsinput-typeahead.css">
 	<!-- <link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
 	<link href="http://cdn.bootcss.com/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.css" rel="stylesheet"> -->
 	<!-- <link href="http://cdn.bootcss.com/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput-typeahead.css" rel="stylesheet"> -->


 </head>
 <body>
 	
 	<input type="text" name="input"  id="inputTest"/>


	<!-- <script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script> -->
    <script type="text/javascript" src="statics/js/jquery-3.1.1.min.js" ></script>
	<script type="text/javascript" src="statics/bootstrap/js/bootstrap.min.js" ></script>
	<!-- <script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> -->
	<!-- <script src="http://cdn.bootcss.com/typeahead.js/0.11.1/typeahead.bundle.min.js"></script> -->
	<!-- <script src="http://cdn.bootcss.com/bootstrap-tagsinput/0.8.0/bootstrap-tagsinput.js"></script> -->
	<script type="text/javascript" src="statics/commonjs/typeahead.bundle.js"></script>
 	<script type="text/javascript" src="statics/bootstrap/plugin/tagsinput/bootstrap-tagsinput.js"></script>
 	
 	<script type="text/javascript">
 		$(function(){


					 var lines = new Bloodhound({
					        datumTokenizer: Bloodhound.tokenizers.obj.whitespace('text'),
					        queryTokenizer: Bloodhound.tokenizers.whitespace,
					        prefetch: 'http://localhost:8080/common/location/textvaluepair'
					    });
					    lines.initialize();

					    data=[{ "value": 1 , "text": "测试1"   , "continent": "Europe"    },
					        { "value": 2 , "text": "东"   , "continent": "Europe"    },
					        { "value": 3 , "text": "南"   , "continent": "Europe"    },
					        { "value": 4 , "text": "abcdefg"   , "continent": "Europe"    }];

					    var elt = $('#inputTest');
					    elt.tagsinput({
					    	tagClass: function(item) {
							    switch (item.value%5) {
							      case 0   : return 'label label-primary';
							      case 1   : return 'label label-danger label-important';
							      case 2   : return 'label label-success';
							      case 3   : return 'label label-default';
							      case 4    : return 'label label-warning';
							    }
							  },
					        itemValue: 'value',
					        itemText: 'text',
					        //maxTags: 10,
					        typeaheadjs: {
					            name: 'lines',
					            displayKey: 'text',
					            source: lines.ttAdapter()
					        }
					    });

					 		});

 	</script>
 </body>
 </html>